<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="http://html5clock.googlecode.com/svn/trunk/pub/rotate.js"></script>
</head>
<body>

<style type="text/css">
	#content {
		width : 400px;
		background : black;
	}
</style>

<div id="content">
</div>

<script type="text/javascript">
<!--

var imgs = [
	"http://html5clock.googlecode.com/svn/trunk/pub/koko0.jpg",
	"http://html5clock.googlecode.com/svn/trunk/pub/koko1.jpg"
];

var senario = [
	{	cont : 2,
		pat : 
			[0,1,1,1]
	},
	{	cont : 2,
		pat : 
			[1,0,1,1]
	},
	{	cont : 2,
		pat : 
			[1,1,1,0]
	},
	{	cont : 2,
		pat : 
			[1,1,0,1]
	}
];


var winw = document.getElementsByTagName('body')[0].offsetWidth;
document.getElementById('content').style.marginLeft = (winw - document.getElementById('content').offsetWidth) / 2 + 'px';

/**
 * RotateClock(id, images, flagClock, flagSmooth, senario);
 *
 * id : DOM's ID(div elment)
 * images : images uris in array format(selects randomly in 4seconds.)
 * flagClock : if true show clock
 * flagSmooth : if true images rotates 30fps (else 1fps)
 * senario : indicates dancing senario in json format.
 *           if set to null, only 1 images rotating.
 */
var clock = new RotateClock('content', imgs, true, true, senario);
-->
</script>
</body>
</html>
